<!--
 * @Author: hucc
 * @Date: 2021-11-02 19:22:12
 * @LastEditors: hucc
 * @LastEditTime: 2021-11-02 19:45:06
 * @Description: 
-->
<template>
    <div>
        <!-- 返回跳转 -->
        <div class='back' @click='toOrder()'>返回</div>
        <!-- 表格开始 -->
        <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单项编号" width="200">
        </el-table-column>
        <el-table-column prop="customerId" label="产品编号" width="200">
        </el-table-column>
        <el-table-column prop="total" label="产品" width="200">
        </el-table-column>
        <el-table-column prop="status" label="产品图片" width="200">
        </el-table-column>
        <el-table-column prop="total" label="单价" width="200">
        </el-table-column>
        <el-table-column prop="customerId" label="数量" width="200">
        </el-table-column>
        </el-table>
        <!-- /表格结束 -->
        <!-- 下单基本信息卡片开始 -->
        <el-card class="box-card1">
            <div slot="header" class="clearfix">
            <span>下单基本信息</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <el-row :gutter='20' class='top'>
                <el-col :span="20">下单者:托马斯</el-col>
            </el-row>
            <el-row :gutter='20'  class='top'>
                <el-col :span="20">下单者手机号:15512348116</el-col>
            </el-row>
        </el-card>
        <!-- /订单基本信息卡片结束 -->
        <!-- 订单者信息开始 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
            <span>订单者信息</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <el-row :gutter='20' class='top'>
                <el-col :span="20">订单编号:{{tableData.id}}</el-col>
            </el-row>
            <el-row :gutter='20'  class='top'>
                <el-col :span="20">订单金额:{{tableData.total}}</el-col>
            </el-row>
            <el-row  class='top'>
                <el-col :span="20">下单时间:{{tableData.serviceTime}}</el-col>
            </el-row>
            <el-row  class='top'>
                <el-col :span="20">订单状态:{{tableData.status}}</el-col>
            </el-row>
                
            
        </el-card>
        <!-- /下单者信息结束 -->
    </div>
</template>
<script>
import {
     findById
  } from '@/api/order'
export default {
    data(){
        return{
            tableData:{},
            params: {
            page: 1,
            pageSize: 10
        },
        id:0,
        }
    },
    methods:{
        toOrder(){
            this.$router.push({path:"/order/List"})
        },
        async tableList(id){
            // let temp=this.id;
            let res = await  findById({id});
            console.log(res);
            this.tableData=res.data;
        }
    },
    created(){
        this.id=this.$route.query.id;
        console.log(this.$route.query.id);
        this.tableList(this.id);
    }
}
</script>
<style scoped>
.back{
    color:orange;
    cursor: pointer;
}
.box-card1{
    float:right;
    width: 300px;
    height: 200px;
    margin-right:500px;
}
.box-card{
    width: 300px;
    height: 200px;
}
.top{
    margin-bottom:10px;
}
/* .clearfix{
    background-color:orange;
} */
</style>